<template>
  <div class="myMusicBox">
    <template v-if="isLogin">
      <div class="myMusicBoxLeft">
        <ul class="myMusicType">
          <router-link
            tag="li"
            :to="{ name: 'mymusic', query: { type: item.id } }"
            v-for="item in musicTypeArr"
            :key="item.id"
            >{{ item.name }}</router-link
          >
        </ul>
      </div>
      <div class="myMusicBoxRight">
        <MySinger v-show="$route.query.type == 1 || !$route.query.type" />
        <MyRadioStation v-show="$route.query.type == 2" />
        <MySongSheet
          :uid="userInfo.profile.userId"
          :isMy="true"
          v-show="$route.query.type == 3"
        />
        <MySongSheet
          :uid="userInfo.profile.userId"
          :isMy="false"
          v-show="$route.query.type == 4"
        />
      </div>
    </template>
    <NoLogin v-else />
  </div>
</template>



<script>
import { mapGetters, mapState } from "vuex";
import MySinger from "@/views/MyMusic/mySinger.vue";
import MyRadioStation from "@/views/MyMusic/myRadioStation.vue";
import MySongSheet from "@/views/MyMusic/mySongSheet.vue";
import NoLogin from "@/views/MyMusic/noLogin.vue";
export default {
  data() {
    return {
      musicTypeArr: [
        { id: 1, name: "我的歌手" },
        { id: 2, name: "我的电台" },
        { id: 3, name: "创建的歌单" },
        { id: 4, name: "收藏的歌单" },
      ],
    };
  },
  components: {
    MySinger,
    MyRadioStation,
    MySongSheet,
    NoLogin,
  },
  computed: {
    ...mapState("loginStore", ["userInfo"]),
    ...mapGetters("loginStore", ["isLogin"]),
  },
};
</script>


<style lang="scss" scoped>
.myMusicBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .myMusicBoxLeft {
    flex: 1;
    border-right: 1px solid #d3d3d3;
    box-sizing: content-box;
    overflow: hidden;
    .myMusicType {
      padding-top: 40px;
      li {
        padding: 0 5px 2px 35px;
        font-family: simsun, \5b8b\4f53;
        font-weight: 700;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        &:hover {
          background: #eee;
        }
        &.router-link-exact-active {
          background: #eee;
        }
      }
    }
  }
  .myMusicBoxRight {
    width: 740px;
    height: 890px;
    padding: 0 40px;
    box-sizing: border-box;
    overflow: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
}
</style>